<template>
	<view class="user-pages-adapay-pay">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" leftIcon=" " title=' ' color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<image mode="aspectFill" lazy-load class="pay-bg" :src="detail.pay_background_image"></image>

		<uni-popup ref="order_info_item" type="bottom" :custom="true" :maskClick="false">
			<view @touchmove.stop.prevent class="order-info-popup fill-base pd-lg"
				v-if="orderInfo && orderInfo.pay_price">
				<view class="flex-center f-title c-title text-bold pb-lg">订单信息</view>
				<view class="flex-between mt-md">
					<view>项目名称</view>
					<view class="max-520 ellipsis">{{orderInfo.title}}</view>
				</view>
				<view class="flex-between mt-md">
					<view>商户名称</view>
					<view class="max-520 ellipsis">{{orderInfo.pay_merchant_name}}</view>
				</view>
				<view class="flex-between mt-md">
					<view>支付类型</view>
					<view>
						{{options.type == 0 && orderInfo.is_add ? '加钟支付' : options.type == 4 ? orderInfo.title :  textArr[options.type]}}
					</view>
				</view>
				<block v-if="options.type == 0&&orderInfo.is_add==0">
					<view class="flex-between mt-md">
						<view>项目金额</view>
						<view>¥{{orderInfo.true_service_price}}</view>
					</view>
					<view class="flex-between mt-md">
						<view>车费</view>
						<view>¥{{orderInfo.true_car_price}}</view>
					</view>
				</block>
				<view class="flex-between mt-md">
					<view>{{options.type==0?orderInfo.is_add==0?'总金额':'项目金额':options.type==1?'项目补差':'支付金额'}}</view>
					<view>¥{{orderInfo.pay_price}}</view>
				</view>
				<view class="flex-between mt-md">
					<view>下单时间</view>
					<view>{{orderInfo.create_time}}</view>
				</view>
				<view @tap.stop="toPay" class="app-btn flex-center f-mini-title c-base radius"
					style="margin: 60rpx auto" :style="{background:primaryColor}">立即支付
				</view>
				<view class="space-safe"></view>
			</view>
		</uni-popup>

		<uni-popup ref="pay_result_item" type="center" :custom="true" :maskClick="false">
			<view class="pay-result-popup flex-center flex-column fill-base radius-32">
				<i class="iconfont" :class="[{'iconzhifuchenggong':paysuc},{'iconzhifushibai':!paysuc}]"
					:style="{color:paysuc?primaryColor:'#FF3C3C'}"></i>
				<view class="f-title c-title text-bold mt-sm mb-sm">{{['支付失败','支付成功'][paysuc]}}</view>
				<view class="f-paragraph" style="color:#666">{{['返回重新下单或重新支付','返回APP查看订单'][paysuc]}}</view>
				<button open-type="launchApp" :app-parameter="`wechat-adapay-${paysuc?'suc':'fail'}`"
					@error="launchAppError" class="app-btn flex-center f-mini-title c-base radius"
					:style="{background:primaryColor}">返回APP
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				typeArr: ['Massage', 'MassageUp', 'Balance', 'ResellerPay', 'AgentRecharge', 'Memberdiscount',
					'Balancediscount', 'PartnerOrder', 'PartnerOrderJoin'
				],
				textArr: ['首单支付', '升级项目', '用户储值', '分销', this.$t('action.agentName') + '充值', '会员卡购买',
					'用户储值', '活动发布费', '参与活动'
				],
				detail: {},
				orderInfo: {},
				paysuc: 1,
				lockTap: false
			}
		},
		onLoad(options) {
			console.log(options, "====adapay-pay onLoad options")
			let {
				type = 0,
					oid = ''
			} = options
			options.type = type * 1
			options.order_code = oid
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		},
		computed: mapState({
			configInfo: state => state.config.configInfo
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				let {
					type,
					order_code
				} = this.options
				let param = {
					type: this.typeArr[type],
					order_code
				}
				let [detail, orderInfo] = await Promise.all([this.$api.base.separateConfigInfo(), this.$api.base
					.orderInfo(param)
				])
				this.isLoad = true
				this.$util.hideAll()
				this.detail = detail
				this.orderInfo = orderInfo
				this.$refs.order_info_item.open()
				let {
					id: uid = 0
				} = this.userInfo
				if (!uid) {
					this.toLogin()
				}
			},
			// 小程序登录
			async toLogin() {
				if (this.lockTap) return
				this.lockTap = true
				let [providerErr, providerData] = await uni.getProvider({
					service: 'oauth',
				})
				let [loginErr, loginData] = await uni.login({
					provider: providerData.provider[0]
				})
				if (loginErr) {
					this.$util.showToast({
						title: loginErr.errMsg
					})
					this.lockTap = false
					return
				}

				let param = {
					code: loginData.code,
					pid: 0,
					coupon_atv_id: 0
				}

				// #ifdef MP-WEIXIN-COACH
				param.is_coach = 1
				// #endif
				// #ifdef MP-WEIXIN-AGENT
				param.is_agent = 1
				// #endif

				try {
					let user_info = await this.$api.base.login(param)
					let {
						autograph,
						data
					} = user_info
					this.$util.hideAll()
					this.lockTap = false
					this.updateUserItem({
						key: 'userInfo',
						val: data
					})
					this.updateUserItem({
						key: 'autograph',
						val: autograph
					})
				} catch (e) {
					this.$util.hideAll()
					this.lockTap = false
				}
			},
			// 去支付
			async toPay() {
				let {
					id: uid = 0
				} = this.userInfo
				if (!uid) {
					await this.toLogin()
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				this.$refs.order_info_item.close()
				let {
					type
				} = this.options
				let {
					id
				} = this.orderInfo

				let methodArr = {
					0: ['order', 'rePayOrder'],
					1: ['order', 'rePayUpOrder'],
					2: ['mine', 'rePayBalanceOrder'],
					3: ['mine', 'reApplyResellerOrder'],
					4: ['agent', 'rePayOrder'],
					5: ['memberdiscount', 'rePayOrder'],
					6: ['mine', 'rePayDiscountOrder'],
					7: ['partner', 'rePayOrder'],
					8: ['partner', 'rePayJoin']
				}

				let methodKey = methodArr[type][0]
				let methodModel = methodArr[type][1]

				try {
					let {
						pay_list
					} = await this.$api[methodKey][methodModel]({
						id
					})
					this.$util.hideAll()
					if (pay_list) {
						try {
							await this.$util.pay(pay_list, false)
							this.paysuc = 1
							this.$refs.pay_result_item.open()
							this.lockTap = false
						} catch (e) {
							this.paysuc = 0
							this.$refs.pay_result_item.open()
							this.lockTap = false
						}
					}
				} catch (e) {
					this.$util.hideAll()
					this.paysuc = 0
					this.$refs.pay_result_item.open()
					this.lockTap = false
				}
			},
			launchAppError(e) {
				console.log(e.detail.errMsg, "===launchAppError e")
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.user-pages-adapay-pay {
		height: 100vh;
		overflow: hidden;

		.pay-bg {
			width: 100%;
			height: 1300rpx;
		}

		.order-info-popup {
			width: 100%;
			min-height: 15vh;
		}

		.pay-result-popup {
			width: 520rpx;
			height: 510rpx;

			.iconfont {
				font-size: 132rpx;
			}
		}

		.app-btn {
			width: 310rpx;
			height: 80rpx;
			margin-top: 60rpx;
		}
	}
</style>